<!-- 吸顶轮播菜单导航 -->
<template>
  <view class="popupWrap">
    <view class="popupItem">
      <up-text text="兑换数量" margin="30rpx 0"></up-text>
      <view class="row between" style="width: 100%">
        <view>
          <up-number-box v-model="productNum" @change="valChange" :max="detail?.inventory || 0" buttonSize="60"
            inputWidth="160"></up-number-box>
        </view>
        <up-text type="main" :text="numRight" align="right"></up-text>
      </view>
    </view>
    <template v-if="type === 'point'">
      <view class="popupItem">
        <up-text text="所需积分" margin="30rpx 0"></up-text>
        <up-text :text="needPoint"></up-text>
      </view>
      <view class="popupItem">
        <up-text text="可用积分" margin="30rpx 0"></up-text>
        <up-text :text="point || '0'"></up-text>
      </view>
    </template>
    <template v-else>
      <view class="popupItem">
        <up-text text="所需金额" margin="30rpx 0"></up-text>
        <up-text :text="`¥${needPoint}`"></up-text>
      </view>
      <view class="popupItem">
        <up-text text="剩余额度" margin="30rpx 0"></up-text>
        <up-text :text="`¥${detail?.initQuota || '0'}`"></up-text>
      </view>
    </template>
    <view style="width: 80px; margin-top: 60rpx;">
      <up-button type="primary" :text="popBottomMsg" @click="buyProduct"></up-button>
    </view>
  </view>
</template>

<script>
import { getInfo } from '@/services/user';

export default {
  props: {
    detail: {
      type: Object,
      default: () => {},
    },
    type: {
      type: String,
      default: '',
    }
  },
  data() {
    return {
      point: 0,
      productNum: 1,
    }
  },
  computed: {
    numRight() {
      const { productNum, detail } = this;
      if (productNum > (detail?.inventory || 0)) {
        return '库存不足';
      }
      return '库存充足';
    },
    needPoint() {
      const { productNum, detail } = this;
      const { price } = detail;
      const needNum = productNum * price;
      if (uni.$u.test.amount(needNum)) {
        return needNum;
      }
      return 0;
    },
    headRight() {
      let msg = this?.detail?.price || '';
      if (this.type === 'point') {
        return msg + '积分'
      }
      return '¥' + msg
    },
    bottomMsg() {
      if (this.type === 'point') {
        return '立即兑换'
      }
      return '立即购买'
    },
    popBottomMsg() {
      if (this.type === 'point') {
        return '确认兑换'
      }
      return '确认购买'
    },
  },
  created() {
    const _that = this;
    getInfo().then((res) => {
      const { success, data } = res || {};
      if (success) {
        _that.point = data?.uscore || 0;
      }
    })
  },
  methods: {
    valChange(e) {
      console.log('当前值为: ' + e.value)
      this.productNum = e.value;
    },
    buyProduct() {
      const { productNum, detail, type, point } = this;
      if (type !== 'point' && (productNum > (detail?.inventory || 0))) {
        uni.$u.toast('库存不足，不允许下单');
        return;
      }
      if (type !== 'point' && (productNum * detail.price) > Number(detail?.initQuota || 0)) {
        uni.$u.toast('购买额度不足');
        return;
      }
      if (type === 'point' && (productNum * detail.price) > Number(point)) {
        uni.$u.toast('积分不足，不能兑换');
        return;
      }
      this.$emit('buyProduct', {
        productNum,
      });
    },
  },
}
</script>

<style lang="scss" scoped>
.popupWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 0 60rpx;
}
.popupItem {
  width: 300px;
  border-bottom: 1rpx solid #BBB;
  padding-bottom: 30rpx;
}
</style>